<script setup lang="ts">
/*
v-model
   vue2和vue3
   vue2
     <xxx :value="appValue" @input="appValue=$event"  />
     <xxx v-model="appValue"   />
     xxx.vue
       props:{
         value:{
          type:String
          ...
         }
       }
       model:{
        prop:'value',
        event:'input'
       }
       this.$emit('input',实参)

    vue3(默认v-model写法) 一个组件可以写多个v-model,vue3没有.sync
       <xxx :modelValue="appValue"  @update:modelValue='appValue=$event'   />
       <xxx v-model:modelValue="appValue"     />
       <xxx v-model="appValue"     />
       defineProps<{
        modelValue:string
       }>()
       const emits=defineEmits<{
        (e:'update:modelValue',x:string):void
       }>()
       emits('update:modelValue',实参值)

      vue3：非默认v-model写法
       <xxx :abc="appValue"  @update:abc='appValue=$event'   />
       <xxx v-model:abc="appValue"     />
       defineProps<{
        abc:string
       }>()
       const emits=defineEmits<{
        (e:'update:abc',x:string):void
       }>()
       emits('update:abc',实参值)

*/
import { ref } from 'vue'
import HmSon2 from './components/HmSon2.vue'
const money = ref<number>(1000)
const fatherAbc = ref(0)
</script>

<template>
  <div class="home-page">
    <h3>我是父组件{{ money }}</h3>
    <hr />
    <!-- <HmSon2 :modelValue="money" @update:modelValue="money = $event"></HmSon2>
    <HmSon2 v-model:modelValue="money"></HmSon2> -->
    <HmSon2 v-model="money" :abc="fatherAbc" @update:abc="fatherAbc = $event"></HmSon2>
    <HmSon2 v-model="money" v-model:abc="fatherAbc"></HmSon2>
  </div>
</template>

<style lang="scss" scoped></style>
